<template>
	<view class= "showDrawer uni-drawer is-foot-boxpd">
		<view class="uni-drawer__mask showDrawer" />
		<view class="uni-drawer__content">
			<view class="title is-nav-title is-flex is-block">Hi,欢迎
				<!-- <view class="is-size-14 has-space-pd-10 is-txt-inline is-blue-color" v-show="malock == 0">
					<uni-icons type="custom" color="#007AFF" size="16"></uni-icons>激活账号
				</view> -->
				<view class="is-nav-li is-grey is-size-20 has-floatr">
					<navigator url="/pages/member/setup" hover-class="navigator-hover">设置</navigator>				
				</view>
			</view>
			<view class="uidbox is-flex is-block">UID:{{foxtel}}</view>
			<view class="memubox is-flex is-block">
				<navigator url="/pages/account/account">
				<uni-icons class="has-floatr has-mgt-12 has-mgr-12" type="arrowright" color="#999999" size="20"></uni-icons>
				<view class="mesg line1">
					<view class="titlebox is-txt-inline">帐户</view>
					<view class="is-img-inline icobox"><image src="../../static/img/icon/ebuy_ico.png" mode=""></image></view>
					<view class="titlebox is-txt-inline has-floatr is-grey">{{user_money}}DC</view>
				</view>
				</navigator>
			</view>
			<view class="memubox is-flex is-block"  v-for="(item,index) in memu" :key="index">
				<navigator :url="item.page">
				<uni-icons class="has-floatr has-mgt-12 has-mgr-12" type="arrowright" color="#999999" size="20"></uni-icons>
				<view class="mesg" :class="[ item.line == 1 ? 'line1' : 'line2' ]">
					<view class="titlebox is-txt-inline">{{item.title}}</view>
					<uni-icons class="is-txt-inline has-mgl-12" :type="item.ico" :color="item.color" size="20"></uni-icons>
				</view>
				</navigator>
			</view>
			<view class="memubox is-flex bg-f is-block">
				<view class="has-pd-10 has-pdl-15 is-size-16">
					 <text class="is-blue">{{region}}</text>
				</view>
			</view>
			<!-- 底部导航 -->
			<view class="is-foot bg-f footmemu is-center">
				<view class="is-col-4 has-pdtb-4" @tap = "closeorder">
					<image src="../../static/tabbar/home.png" mode=""></image>
					<text class="is-block">首页</text>
				</view>
				<view class="is-col-5 has-pdtb-4" @tap = "toorder">
					<image src="../../static/tabbar/order.png" mode=""></image>
					<text class="is-block">接单</text>
				</view>
				<view class="is-col-6 has-pdtb-4"  @tap="goshare">
					<image src="../../static/tabbar/share.png" mode=""></image>
					<text class="is-block">邀请赚钱</text>
				</view>
				<view class="is-col-5 has-pdtb-4">
					<image src="../../static/tabbar/myH.png" mode=""></image>
					<text class="is-blue is-block">我的</text>
				</view>
				<view class="is-col-4 has-pdtb-4" @tap="gochat">
					<image src="../../static/tabbar/kefu.png" mode=""></image>
					<text class="is-block">客服</text>
				</view>
			</view>
			<!-- 底部导航 -->
			<popup-layer ref="popupRef" :direction="'right'">
				<view style="width:750upx;height: 100%;">
					<citySelect @back_city="back_city"></citySelect>
				</view>
			</popup-layer>
		</view>
	</view>
	</view>
</template>

<script>
	var _self;
	var banben = null;
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import citySelect from '@/components/citySelect/citySelect.vue';
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	export default {
		components: {
			citySelect,
			popupLayer,
			uniIcons},
		name: 'UniDrawer',
		data() {
			return {
				statusBarHeight: this.statusBarHeight, //状态栏高度，在main.js里
				region: '',
				visibleSync: false,
				showDrawer: false,
				rightMode: false,
				watchTimer: null,
				memu:[],
				foxtel:'',
				visible: false,
				mode:'',
				mask: true,
				malock:1,
				user_money:'0.00',
				diamond_sheng_on:0,
				diamond_shi_on:0,
				diamond_order_time:''
			}
		},
		onLoad() {
			var _self = this;
			
			let info = this.service.getfox();
			if(info[0]){
				// console.log(info[0])				
				this.foxtoken = info[0]['foxtoken'];
				//#ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
					banben = wgtinfo.version;//应用版本号
					console.log(banben)
				})
				//#endif
				// uni.clearStorageSync();
				uni.request({
					url: this.service.FOX_URL + 'diamond/get_userinfo_home',
					method:'POST',
					data: {
						user_key: this.foxtoken,
						banben:banben
					},
					dataType:'json',
					header:{
						'content-type':'application/x-www-form-urlencoded',
					},
					success: res => {
						// var rest = JSON.stringify(res);
						 // console.log(res)
						var rest = res.data;
						if(rest.status == 'success'){
							this.userinfo = rest.msg;
							this.malock = this.userinfo['ma_lock'];
							this.foxtel = this.userinfo['user_name'];
							this.user_money = this.userinfo['user_money'];
							this.user_money_can = this.userinfo['user_money_can'];
							this.user_money_lock = this.userinfo['user_money_lock'];
							this.fox_money_can = this.userinfo['diamondset']['diamond_money_can'];
							this.fox_user_jihuo = this.userinfo['diamondset']['diamond_user_jihuo'];
							this.diamond_sheng_on = this.userinfo['diamondset']['diamond_sheng_on'];
							this.diamond_shi_on = this.userinfo['diamondset']['diamond_shi_on'];
							this.diamond_order_time = this.userinfo['diamondset']['diamond_order_time'];
							if(this.userinfo['ma']){
								uni.setStorageSync('matype', this.userinfo['ma']['ma_type']);
							}
							if(this.diamond_order_time && this.diamond_order_time > 0){
								uni.setStorageSync('active', true);
							}else{
								uni.setStorageSync('active', false);
							}
							this.list = this.userinfo['notice'];
							// console.log(this.userinfo)
						}else if(rest.status == 'error'){
							uni.clearStorageSync();
							uni.showToast({
								title:rest.msg,
								icon:'none',
								mask:true
							})
							setTimeout(function() {
							    uni.reLaunch({
							    	url:'../logon/login'
							    })
							}, 1500)
						}else{
							uni.clearStorageSync();
							uni.reLaunch({
								url:'../logon/login'
							})
						}
					}
				})
			}else{
				uni.reLaunch({
					url:'../logon/login'
				})
			}
			this.region = uni.getStorageSync('region')
			
			this.memu = this.service.memu;
		},
		watch: {
			visible(val) {
				if (val) {
					this.open()
				} else {
					this.close()
				}
			}
		},
		created() {
			this.visibleSync = this.visible
			setTimeout(() => {
				this.showDrawer = this.visible
			}, 1)
			this.rightMode = this.mode === 'right'
			this.region = uni.getStorageSync('region');
		},
		methods: {
			oncity() {
				var that = this
				this.$refs.popupRef.show();
			},
			back_city(e) { 
				if (e !== 'no') {
					this.region = e.cityName
					console.log(e.cityName)
					uni.setStorageSync('region', e.cityName);
					this.$refs.popupRef.close();
				} else {
					this.$refs.popupRef.close();
				}
			},
			close() {
				this._change('showDrawer', 'visibleSync', false)
			},
			open() {
				this._change('visibleSync', 'showDrawer', true)
			},
			_change(param1, param2, status) {
				this[param1] = status
				if (this.watchTimer) {
					clearTimeout(this.watchTimer)
				}
				this.watchTimer = setTimeout(() => {
					this[param2] = status
					this.$emit(status ? 'open' : 'close')
				}, status ? 50 : 300)
			},
			toorder(){
				uni.reLaunch({
					url:'/pages/index/orderline'
				})
			},
			closeorder(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			goshare(){
				uni.reLaunch({
					url:'/pages/member/my_shares'
				})
			},
			gochat(){
				uni.reLaunch({
					url:'/pages/index/chat'
				})				
			}
		}
	}
</script>

<style>
	// 抽屉宽度
	$drawer-width: 100%;
	.uni-drawer {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.uni-drawer__content {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		width: $drawer-width;
		background-color: #FFFFFF;
		transition: transform 0.3s ease;
	}

	.uni-drawer--left {
		left: 0;
		transform: translateX(-$drawer-width);
	}

	.uni-drawer--right {
		right: 0;
		transform: translateX($drawer-width);
	}

	.uni-drawer__content--visible {
		transform: translateX(0px);
	}


	.uni-drawer__mask {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		background-color: $uni-bg-color-mask;
		transition: opacity 0.3s;
	}

	.uni-drawer__mask--visible {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		opacity: 1;
	}
	.title{
		padding:20upx 20upx 0 20upx;
		font-size: 48upx;
		width:90%;
	}
	.mesg{
		flex-direction: column;
		font-size: 36upx;
		padding: 16upx 10upx 16upx 30upx;
		margin:10upx 0;
	}
	.line1{border-bottom: 1px solid #F9F9F9;}
	.line2{border-bottom: 10px solid #F9F9F9;}
	.uidbox{padding:20upx;color: #C0C0C0;}
	.icobox{display: inline-block;}
	.icobox image{display: inline-block;height:48upx;width:150upx;}
</style>
